import React, { PureComponent, Fragment } from "react";
import {
  Form,
  Input,
  Modal,
  Radio,
} from "antd";


const FormItem = Form.Item;
const { TextArea } = Input;

const RadioGroup = Radio.Group;
//更新和新增用户信息   modalVisible

@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 }
    };
  }

  // 表单
  renderContent = () => {
    const { form, values } = this.props;
    return [
      <FormItem key="realName" {...this.formLayout} label="角色名称">
        {form.getFieldDecorator("roleName", {
          rules: [{ required: true, message: "请输入角色名称！" }],
          initialValue: values.roleName
        })(<Input placeholder="请输入"/>)}
      </FormItem>,
      <FormItem key="status" {...this.formLayout} label="状态">
        {form.getFieldDecorator("status", {
          rules: [{ required: true, message: "请选择状态！" }],
          initialValue: values.status
        })(
          <RadioGroup>
            <Radio value={1}>开启</Radio>
            <Radio value={2}>暂停</Radio>
          </RadioGroup>

        )}
      </FormItem>,
      <FormItem key="address" {...this.formLayout} label="备注">
        {form.getFieldDecorator("remark", {
          rules: [{ required: false, message: "请输入至少五个字符的备注！", min: 5 }],
          initialValue: values.remark
        })(<TextArea rows={4} placeholder="请输入至少五个字符"/>)}
      </FormItem>
    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;

    //完成
    const handleNext = () => {
      const { form, values, handleUpdate, handleAdd, modalVisible } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        if (modalVisible) {
          handleAdd(formVals);
        } else {
          handleUpdate(formVals);

        }
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: "32px 40px 48px" }}
        destroyOnClose
        title={modalVisible ? "新增角色" : "修改角色"}
        visible={updateModalVisible}
        onOk={handleNext}
        onCancel={() => handleUpdateModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
